<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>开始使用Layui</title>
  <link rel="stylesheet" href="/Public/layui/dist/css/layui.css">
  <link rel="stylesheet" href="//res.layui.com/css/global.css?t=1504439386550" media="all">
</head>
<!--container  1170px 居中-->
<div class="layui-container" >
  常规布局（以中型屏幕桌面为例）：
  <div class="layui-row">
    <div class="layui-col-md9 grid-demo grid-demo-bg1">
      你的内容 9/12
    </div>
    <div class="layui-col-md3 grid-demo grid-demo-bg2">
      你的内容 3/12
    </div>
  </div>
  <div class="layui-row">
    <div class="layui-col-md2 grid-demo grid-demo-bg1">
      你的内容 2/12
    </div>
    <div class="layui-col-md4 grid-demo grid-demo-bg2">
      你的内容 4/12
    </div>
    <div class="layui-col-md6 grid-demo grid-demo-bg3">
      你的内容 6/12
    </div>
  </div>

  移动设备、平板、桌面端的不同表现：
  <div class="layui-row">
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4 grid-demo grid-demo-bg1">
      移动：6/12 | 平板：6/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4 grid-demo grid-demo-bg2">
      移动：6/12 | 平板：6/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs4 layui-col-sm12 layui-col-md4 grid-demo grid-demo-bg3">
      移动：4/12 | 平板：12/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs4 layui-col-sm7 layui-col-md8 grid-demo grid-demo-bg4">
      移动：4/12 | 平板：7/12 | 桌面：8/12
    </div>
    <div class="layui-col-xs4 layui-col-sm5 layui-col-md4 grid-demo layui-bg-green">
      移动：4/12 | 平板：5/12 | 桌面：4/12
    </div>
  </div>

  颜色
  <div class="layui-bg-red">1</div>
  <div class="layui-bg-orange">2</div>
  <div class="layui-bg-green">3</div>
  <div class="layui-bg-blue">4</div>
  <div class="layui-bg-black">5</div>
  图标
  <div><i class="layui-icon" style="font-size: 30px; color: #1E9FFF;">&#xe60c;</i></div>
  <div><i class="layui-icon" style="font-size: 30px; color: #1E9FFF;">&#xe6c6;</i></div>
  <div><i class="layui-icon" style="font-size: 30px; color: #1E9FFF;">&#xe60c;</i></div>
  <div><i class="layui-icon" style="font-size: 30px; color: #1E9FFF;">&#xe60c;</i></div>
  <div><i class="layui-icon" style="font-size: 30px; color: #1E9FFF;">&#xe60c;</i></div>

  <!--选项卡必须要加 form表单 -->
  <form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
      <select name="city" lay-verify="required">
        <option value=""></option>
        <option value="0">北京</option>
        <option value="1">上海</option>
        <option value="2">广州</option>
        <option value="3">深圳</option>
        <option value="4">杭州</option>
      </select>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">选项组</label>
    <div class="layui-input-block">
      <select name="quiz">
        <optgroup label="城市记忆">
          <option value="你工作的第一个城市">你工作的第一个城市？</option>
        </optgroup>
        <optgroup label="学生时代">
          <option value="你的工号">你的工号？</option>
          <option value="你最喜欢的老师">你最喜欢的老师？</option>
        </optgroup>
      </select>
    </div>
  </div>


  <div class="layui-form-item">
    <label class="layui-form-label">搜索</label>
    <div class="layui-input-block">
      <select name="city" lay-verify="required" lay-search>
        <option value="010">layer</option>
        <option value="021">form</option>
        <option value="0571" selected>1</option>
        <option value="057" >2</option>
        <option value="05" >3</option>
      </select>
    </div>
  </div>

  </form>
  <!--tab-->
  <div class="layui-tab layui-tab-card"  lay-allowClose="true" lay-filter="test1">
    <ul class="layui-tab-title ">
      <li lay-id="1">网站设置</li>
      <li lay-id="2">用户管理</li>
      <li lay-id="3" class="layui-this">权限分配</li>
      <li lay-id="4">商品管理</li>
      <li lay-id="5">订单管理</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
      <div class="layui-tab-item ">1</div>
      <div class="layui-tab-item">2</div>
      <div class="layui-tab-item  layui-show">3</div>
      <div class="layui-tab-item">4</div>
      <div class="layui-tab-item">5</div>
      <div class="layui-tab-item">6</div>
    </div>
  </div>

  <table class="layui-table" lay-even lay-skin="line">
    <colgroup>
      <col width="150">
      <col width="200">
      <col>
    </colgroup>
    <thead>
    <tr>
      <th>昵称</th>
      <th>加入时间</th>
      <th>签名</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>贤心</td>
      <td>2016-11-29</td>
      <td>人生就像是一场修行</td>
    </tr>
    <tr>
      <td>许闲心</td>
      <td>2016-11-28</td>
      <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
    </tr>
    </tbody>
  </table>

  <input type="text" class="layui-input" id="test1">

</div>




<body>
 
<!-- 你的HTML代码 -->
 
<script src="/Public/layui/dist/layui.all.js"></script>
<script>

    layui.use('element', function(){
        var element = layui.element;

        //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
        var layid = location.hash.replace(/^#test1=/, '');
        console.log(layid);
        element.tabChange('test1', layid); //假设当前地址为：http://a.com#test1=222，那么选项卡会自动切换到“发送消息”这一项
        //监听Tab切换，以改变地址hash值
        element.on('tab(test1)', function(){
            location.hash = 'test1='+ this.getAttribute('lay-id');
        });
    });

    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#test1', //指定元素
            type: 'datetime'
        });
    });

    layer.tab({
        area: ['600px', '300px'],
        tab: [{
            title: 'TAB1',
            content: '内容1'
        }, {
            title: 'TAB2',
            content: '内容2'
        }, {
            title: 'TAB3',
            content: '内容3'
        }]
    });

</script> 
</body>
</html>